<template>
  <el-dialog :title=" title + '(新增/编辑)'" :visible.sync="open">

    <el-row :gutter="20" style="width: 400px">
      <el-col :span="8">型号：{{basicInfo.productModelNumber}}</el-col>
      <el-col :span="8">系列：{{basicInfo.productCategory}}</el-col>
      <el-col :span="8">修改人：{{$store.getters.userName}}</el-col>
    </el-row>

    <el-button
      size="small"
      type="success"
      icon="el-icon-circle-plus-outline"
      @click="saveCategoryInfoTemplateRel()"
    >保存为模板</el-button>

    <el-dialog width="25%" :title="'新增'+title" :visible.sync="innerVisible0" append-to-body>
      <el-form :model="categoryInfoData" :rules="rules" ref="categoryInfoData" label-width="80px" size="mini">
        <el-row :gutter="20" style="width: 400px">
        <el-col :span="8">型号：{{basicInfo.productModelNumber}}</el-col>
        <el-col :span="8">系列：{{basicInfo.productCategory}}</el-col>
        </el-row>
        <p></p>

        <el-form-item label="系列属性" prop="category">
          <el-select v-model="categoryInfoData.categoryInfoTemplateId" placeholder="请选择">
            <el-option
              v-for="templateInfo in this.templateInfoList"
              :key="templateInfo.categoryInfoTemplateId"
              :label="templateInfo.templateName"
              :value="templateInfo.categoryInfoTemplateId">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="属性值" prop="type">
          <el-input v-model="categoryInfoData.templateValue"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit('categoryInfoData')" type="primary">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog width="25%" :title="'新增'+title" :visible.sync="innerVisible1" append-to-body>
      <el-form :model="templateData" :rules="rules" ref="templateData" label-width="80px" size="mini">
        <el-row :gutter="20" style="width: 400px">
          <el-col :span="8">型号：{{basicInfo.productModelNumber}}</el-col>
          <el-col :span="8">系列：{{basicInfo.productCategory}}</el-col>
        </el-row>
        <p></p>

        <el-form-item label="系列属性" prop="category">
          <el-select v-model="templateData.categoryInfoTemplateId" placeholder="请选择">
            <el-option
              v-for="templateInfo in this.templateInfoList"
              :key="templateInfo.categoryInfoTemplateId"
              :label="templateInfo.templateName"
              :value="templateInfo.categoryInfoTemplateId">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="必填" prop="type">
          <template>
            <el-radio-group v-model="templateData.must">
              <el-radio :label="0">非必填</el-radio>
              <el-radio :label="1">必填</el-radio>
            </el-radio-group>
          </template>

        </el-form-item>

        <el-form-item label="备注" prop="type">
          <el-input v-model="templateData.remark"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="onSubmitTemplateData('templateData')" type="primary">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-button @click="addRow()" type="primary" size="mini">新增</el-button>

    <el-table :data="tableData" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="templateName" label="系列属性"></el-table-column>
      <el-table-column prop="must" label="必填">
        <template slot-scope="scope">
          {{scope.row.must === 0 ? '非必填' : scope.row.must === 1 ? '必填' : ''}}
        </template>

      </el-table-column>
      <el-table-column prop="templateValue" label="属性值"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="userName" label="修改人"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间"></el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="mini">编辑</el-button>
          <el-button type="text" size="mini" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </el-dialog>
</template>
<script>


  export default {
    props: {
      templateInfoList: {
        type: Array
      },
      basicInfo: {
        type: Object
      },
      productTemplateRelList: {
        type: Array
      },
      template:String,
      categoryInfo:String,

    },
    data() {
      return {
        title: '',
        open: false,
        innerVisible0: false, //系列信息弹窗变量
        innerVisible1: false, //模板弹窗变量
        tableData: [],
        rules: {
          action: [{ required: true, message: '请输入动作', trigger: 'blur' }]
        },
        categoryInfoData: {
          categoryInfoTemplateId: '',   //模板信息id
          templateValue: '',             //属性值
          id: 0,
          productId: 0,
          productCategoryId: 0,
          remark:''

        },
        templateData:{
          categoryInfoTemplateId: '',   //模板信息id
          id: 0,
          productId: 0,
          productCategoryId: 0,
          must: 0,
          remark:''
        },
        multipleSelection: []
      }
    },
    methods: {
      add(title) {
        this.tableData = [];
        this.open = true

        this.getProductTemplateRelList();
        this.title = title;
      },
      //编辑模板
      editCategoryInfoTemplateRel(title) {
        this.tableData = [];
        this.open = true;
        this.getProductCategoryInfoTemplateList();
        this.title = title;
      },
      addRow() {
        if(this.title == this.template){ //模板
          this.innerVisible1 = true
          this.templateData = {}
        }else{ //系列信息
          this.innerVisible0 = true
          this.categoryInfoData = {}
        }
        // this.categoryInfoData.productCategoryId = this.basicInfo.productCategoryId
        // this.categoryInfoData.productId = this.basicInfo.productId

      },
      edit(row) {
        console.log("====row====")
        console.log(row)
        if(this.title == this.template){ //模板
          this.innerVisible1 = true;
          this.templateData = row
        }else{ //系列信息
          this.innerVisible0 = true
          this.categoryInfoData = row
        }

      },
      del(id) {

        if(this.title == this.categoryInfo){

        this.$ajax
          .delete(
            this.GLOBAL.productService +
            "/productCategoryInfoTemplate/deleteProductTemplateRel?id=" + id)
          .then((res) => {
            console.log("=============")
            console.log(res.data)
            if (res.data.code === this.ERR_OK) {
              //this.tableData = res.data.data;
              console.log("tableData==")
              console.log(this.tableData)
              this.$message.success(res.data.msg);
              this.$emit('loadData')
              this.getProductTemplateRelList();
            }else{
              this.$message.error(res.data.msg);
            }
          });


        }else{
          //删除模板
          this.$ajax
            .delete(
              this.GLOBAL.productService +
              "/productCategoryInfoTemplate/deleteProductCategoryInfoTemplateRel?id=" + id)
            .then((res) => {
              console.log("=============")
              console.log(res.data)
              if (res.data.code === this.ERR_OK) {
                //this.tableData = res.data.data;
                this.$message.success(res.data.msg);
                this.getProductCategoryInfoTemplateList();
              }else{
                this.$message.error(res.data.msg);
              }
            });


        }

      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            let param = {
              categoryInfoTemplateId: this.categoryInfoData.categoryInfoTemplateId,
              productId: this.basicInfo.productId,
              templateValue: this.categoryInfoData.templateValue,
              id: this.categoryInfoData.id
            };

            if (this.categoryInfoData.id) {
              //编辑
              let param = this.categoryInfoData;
              this.$ajax({
                method: "PUT",
                url:
                  this.GLOBAL.productService +
                  "/productCategoryInfoTemplate/updateProductTemplateRel",
                data: param,
              }).then((res) => {
                if (res.data.code === this.ERR_OK) {
                  this.innerVisible0 = false
                  this.$emit('loadData')
                  this.$refs[formName].resetFields()
                  this.$message.success(res.data.msg);
                } else {
                  this.$message.error(res.data.msg);
                }
              });

            } else {
              //新增
              console.log("请求参数===")
              console.log(param)

              this.$ajax({
                method: "post",
                url:
                  this.GLOBAL.productService +
                  "/productCategoryInfoTemplate/addProductTemplateRel",
                data: param,
              }).then((res) => {
                if (res.data.code === this.ERR_OK) {
                  this.innerVisible0 = false
                  this.$emit('loadData')
                  this.$refs[formName].resetFields()
                  this.$message.success(res.data.msg);
                } else {
                  this.$message.error(res.data.msg);
                }
              });
            }

            //查询刷新
            this.getProductTemplateRelList();

          } else {
            return false
          }
        })
      },

      onSubmitTemplateData(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            let param = {
              categoryInfoTemplateId: this.templateData.categoryInfoTemplateId,
              productCategoryId: this.basicInfo.productCategoryId,
              must: this.templateData.must,
              id: this.templateData.id
            };

            console.log("===模板请求参数===")
            console.log(param)
            console.log(this.templateData.id)


            if (this.templateData.id) {
              //编辑
              console.log("编辑")

              let param = this.templateData;
              this.$ajax({
                method: "PUT",
                url:
                  this.GLOBAL.productService +
                  "/productCategoryInfoTemplate/updateProductCategoryInfoTemplateRel",
                data: param,
              }).then((res) => {
                if (res.data.code === this.ERR_OK) {
                  this.innerVisible1 = false
                  this.$message.success(res.data.msg);
                  this.$refs[formName].resetFields()
                } else {
                  this.$message.error(res.data.msg);
                }
              });

            } else {
              //新增
              console.log("新增")
              this.$ajax({
                method: "post",
                url:
                  this.GLOBAL.productService +
                  "/productCategoryInfoTemplate/addProductCategoryInfoTemplateRel",
                data: param,
              }).then((res) => {
                if (res.data.code === this.ERR_OK) {
                  this.innerVisible1 = false
                  this.$refs[formName].resetFields()
                  this.$message.success(res.data.msg);
                } else {
                  this.$message.error(res.data.msg);
                }
              });
            }

            //查询刷新
            this.getProductCategoryInfoTemplateList();

          } else {
            return false
          }
        })
      },
      getProductTemplateRelList() {
        this.$ajax
          .get(
            this.GLOBAL.productService +
            "/productCategoryInfoTemplate/findProductTemplateRelByProductId?productId=" + this.basicInfo.productId)
          .then((res) => {
            console.log("获取产品模板列表")
            console.log(res.data)
            if (res.data.code === this.ERR_OK) {
              this.tableData = res.data.data;
            } else {
              this.$message.error(res.data.msg);
            }
          });
      },

      getProductCategoryInfoTemplateList() {
        this.$ajax
          .get(
            this.GLOBAL.productService +
            "/productCategoryInfoTemplate/findProductCategoryInfoTemplateRelList?productCategoryId=" + this.basicInfo.productCategoryId)
          .then((res) => {
            console.log("获取系列信息列表")
            console.log(res.data)
            if (res.data.code === this.ERR_OK) {
              this.tableData = []
              this.tableData = res.data.data;
            } else {
              this.$message.error(res.data.msg);
            }
          });
      },
      saveCategoryInfoTemplateRel() {

        this.categoryInfoData = this.multipleSelection[0];
        let param =  this.categoryInfoData;
        console.log("======== param ")
        console.log( param)
        //系列赋值
        param.productCategoryId = this.basicInfo.productCategoryId;

        this.$ajax({
          method: "post",
          url:
            this.GLOBAL.productService +
            "/productCategoryInfoTemplate/addProductCategoryInfoTemplateRel",
          data: param,
        }).then((res) => {
          if (res.data.code === this.ERR_OK) {
            this.innerVisible = false
            this.$emit('loadData')
            this.$message.success(res.data.msg);
            this.$refs[formName].resetFields()

          } else {
            this.$message.error(res.data.msg);
          }
        });


      },
      //
      handleSelectionChange(val){
        //勾选赋值
        this.multipleSelection = val
        console.log("======val ====")
        console.log(val)
      },
    }
  }
</script>
